<template>
  <div class="login-scan-container">
    <div ref="qrcodeRef"></div>
    <div class="font12 mt20 login-msg">
      <i class="iconfont icon-saoyisao mr5"></i>
      <span>打开手机扫一扫，快速登录</span>
    </div>
  </div>
</template>

<script>
import QRCode from "qrcodejs2-fixes";
import { Qrkey, CreateQCode, ScanQCode, GetLoginStatus } from "../../Api/login";
import { Message } from "element-ui";
import { setToken } from "@/utils/auth";
export default {
  name: "QrScan",
  data() {
    return {
      CheckQrCodeTimer: null, //轮询扫码状态
    };
  },
  created() {
    this.createQrCodeKey();
  },
  mounted() {},
  methods: {
    // 初始化生成二维码

    initQrcode(qrUrl) {
      this.$nextTick(() => {
        let qrcodeRef = this.$refs.qrcodeRef;
        qrcodeRef.innerHTML = "";
        new QRCode(qrcodeRef, {
          text: qrUrl,
          colorDark: "#000000",
          colorLight: "#ffffff",
        });
      });
    },
    // 获取二维码key
    createQrCodeKey() {
      Qrkey({ timestamp: new Date().getTime() }).then((res) => {
        if (res.code == 200) {
          this.createQrCode(res.data.unikey);
          this.CheckQrCode(res.data.unikey);
        }
      });
    },
    //二维码生成
    createQrCode(key) {
      CreateQCode({ key, qrimg: true, timestamp: new Date().getTime() }).then(
        (res) => {
          if (res.code == 200) {
            this.initQrcode(res.data.qrurl);
          }
        }
      );
    },
    //二维码扫码状态
    CheckQrCode(key) {
      clearInterval(this.CheckQrCodeTimer);
      // 轮询检测扫码状态
      let that = this;
      this.CheckQrCodeTimer = setInterval(() => {
        ScanQCode({ key, timestamp: new Date().getTime() }).then(
          async (res) => {
            // console.log("二维码扫码状态", res);
            if (res.code === 800) {
              clearInterval(that.CheckQrCodeTimer);
              Message.warning("二维码已过期，请重新获取！");
            } 
             if (res.code === 803) {
              clearInterval(that.CheckQrCodeTimer);
              Message.success("授权登陆成功");
              await that.getLoginStatus(res.cookie);
              that.$store.commit("user/SET_TOKEN", res.cookie);
              setTimeout(() => {
                that.$router.push({ name: "PersonInfo" });
              }, 2000);
            } 
          }
        );
      }, 3000);
    },
    // 获取登录状态
    getLoginStatus(cookie) {
      clearInterval(this.CheckQrCodeTimer);
      GetLoginStatus({ cookie }).then((res) => {
        if (res.data.code === 200) {
          let userId = res.data.profile.userId
          this.$store.commit("user/SET_USERID", userId);
        }
      });
    },
    //
  },
};
</script>

<style scoped lang="scss">
.login-scan-animation {
  opacity: 0;
  animation-name: error-num;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
}
.login-scan-container {
  width: 50%;
  height: 50%;
  padding: 30px;
  box-sizing: border-box;
  display: flex;
  margin: auto;
  flex-direction: column;
  text-align: center;
  :deep(img) {
    margin: auto;
  }
  .login-msg {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #a8abb2;
  }
}
</style>
